<!--撤回案件-->

<template>
  <el-dialog title="复议" width="60%" :visible="visible" @close="handleClose">
    <div class="white-card">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="复议原因：" prop="repeatCheckReason">
          <el-input v-model="form.repeatCheckReason" show-word-limit maxlength="300" placeholder="请输入详细描述" type="textarea" style="width: 100%; height: 150px"></el-input>
        </el-form-item>

        <el-form-item label="佐证材料：" prop="attachmentList">
          <upload-input :file-list="form.attachmentList" tipsText=""></upload-input>
        </el-form-item>

        <div class="dialog-footer-btn">
          <el-button @click="handleClose" type="primary" plain>关闭</el-button>
          <el-button @click="handleSubmit" :loading="submitting" type="primary">确定</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import * as mixins from "@/utils/mixins";
import * as portalWorkOrderAPI from "@/api/portals/workOrder";
import { fileSize, getCMSUserInfo, postPortalsHeight } from "@/utils/common";
import { repeatCheck } from "@/api/portals/workOrder";
import * as fileApi from "@/api/file";
import uploadInput from "@/components/uploadInput/uploadInput.vue";

export default {
  name: "reconsiderationDialog",
  components: { uploadInput },
  mixins: [mixins.dialog, mixins.form],
  props: ["visible", "workOrderId"],
  data() {
    return {
      fileList: [],
      uploading: false,
      form: {
        repeatCheckReason: "",
        attachmentList: [],
      },
      rules: {
        repeatCheckReason: [{ required: true, message: "请填写" }],
        attachmentList: [{ required: true, message: "请填写" }],
      },
      optionList: [],
      submitting: false,
    };
  },
  methods: {
    show() {},
    handleSubmit() {
      this.validate("form")
        .then(() => {
          const cmsUserInfo = getCMSUserInfo();
          this.submitting = true;
          return portalWorkOrderAPI.repeatCheck({
            ...this.form,
            createUser: cmsUserInfo.userId,
            workOrderId: this.workOrderId,
          });
        })
        .then(() => {
          this.$emit("success");
          this.handleClose();
          this.$alert("提交成功", "提示", { customClass: "top20" });
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    handleUploadFile() {
      this.$refs.fileInput.click();
    },
    handleFileChange(e) {
      const file = e.target.files[0];
      if (fileSize(file) > 100) {
        this.clearFileInput();
        return this.$message.error("请上传100M以内的文件");
      }

      const formData = new FormData();
      formData.append("file", file);
      this.uploading = true;
      fileApi
        .upload(formData)
        .then((res) => {
          this.$message.success("上传成功");
          this.form.attachmentList.push({
            fileName: file.name,
            fileUrl: res.data,
          });
        })
        .finally(() => {
          this.clearFileInput();
          this.uploading = false;
          this.$nextTick(postPortalsHeight);
        });
    },
    clearFileInput() {
      document.getElementById("fileInput").value = "";
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
    handleRemoveFile(index) {
      this.fileList.splice(index, 1);
    },
  },
};
</script>

<style scoped></style>
